<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>动画</title>
  <style>
    body {
      font-family: 'Arial';
      font-size: 1em;
    }

    * {
      transition: 1s;
    }

    :root {
      --radius: 100px 100px 100px 100px;
    }

    .container {
      padding: 5em 0;
    }

    .radio-wrapper {
      position: fixed;
      top: 0;
      background: #c1211e;
      left: 50%;
      transform: translate(-50%);
      display: flex;
      border-radius: 0 0 10px 10px;
    }

    /* 隐藏单选按钮 */
    .form-check-input {
      /* display: none; */
    }

    input#check1 {
      margin-right: 10px;
    }

    .form-check-label {
      color: #fff;
      /* font-size: 1.3em; */
    }

    .form-check-inline:nth-child(1) {
      margin-right: 30px;
    }

    .form-check-inline {
      padding: 10px 20px;
    }

    body {
      background-color: #121214;
      height: 100vh;
    }

    .window-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .window-view {
      width: 250px;
      height: 355px;
    }

    .window {
      border-radius: var(--radius);
      display: flex;
      justify-content: center;
      align-items: center;
      /* border-radius: 50%;border-radius: 50%; */
    }

    .window-border {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      background: #c1211e;
      border: 6px solid;
      box-shadow: 0px 0px 6px 3px #c55351;
      position: relative;
      box-sizing: border-box;
    }

    .window-border-inside {
      width: 85%;
      height: 90%;
      background-color: #ec9191;
      position: absolute;
      border-radius: 100px 100px 100px 100px;
      border: 1px solid;
      box-shadow: 0px 0px 12px 10px #ffffff3d;
    }

    .sky {
      position: absolute;
      width: 88%;
      height: 90%;
      background-color: #003266;
      border-radius: 100px 100px 100px 100px;
      overflow: hidden;
    }

    .moon {
      width: 50px;
      height: 50px;
      background: transparent;
      border-radius: 50%;
      position: absolute;
      top: 45px;
      left: 0;
      border-top: 5px solid #fff;
      transform: rotate(127deg);
    }

    .cloud {
      width: 80px;
      height: 80px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .cloud-part {
      position: absolute;
      border-radius: 100px;
      width: 100%;
      height: 35%;
      background: #fc8483;
    }

    .cloud-part:after,
    .cloud-part:before {
      content: "";
      position: absolute;
      background: #ff7c7d;
    }

    .cloud-part:before {
      border-radius: 50%;
      width: 50%;
      height: 140%;
      right: 10%;
      top: -70%;
    }

    .cloud-part:after {
      border-radius: 100px;
      height: 140%;
      left: 15%;
      top: -42%;
      width: 50%;
    }

    .cloud-wrapper[data-v-04536595] {
      display: flex;
      height: 30%;
    }

    .cloud-wrapper>.cloud {
      -webkit-animation: cloudMoving linear infinite;
      animation: cloudMoving linear infinite;
      position: absolute;
      left: 0;
    }

    .cloud-wrapper>.cloud:first-child {
      width: 100px;
      animation-duration: 30s;
      opacity: 0.3;
      transform: scale(0.9);
      align-self: flex-end;
      top: 0px;
    }

    .cloud-wrapper>.cloud:nth-child(2) {
      animation-duration: 5s;
      opacity: 0.9;
      align-self: center;
      bottom: 65px;
    }

    .cloud-wrapper>.cloud:nth-child(3) {
      animation-duration: 15s;
      opacity: 0.5;
      width: 100px;
      align-self: flex-start;
      bottom: 0;
    }

    .big-cloud[data-v-04536595] {
      width: 200px;
      height: 150px;
      z-index: -1;
    }

    .stars {
      position: relative;
    }

    .star:nth-child(1) {
      width: 1px;
      height: 1px;
      background-color: #fff;
      position: absolute;
      left: 20px;
      top: 20px;
    }

    .star:nth-child(2) {
      width: 1px;
      height: 1px;
      background-color: #fff;
      position: absolute;
      bottom: 30px;
      left: 70px;
    }

    .star:nth-child(3) {
      width: 1px;
      height: 1px;
      background-color: #fff;
      position: absolute;
      bottom: 100px;
      right: 50px;
    }

    .star:nth-child(4) {
      width: 1px;
      height: 1px;
      background-color: #fff;
      position: absolute;
      top: 60px;
      right: 75px;
    }

    .star:nth-child(5) {
      width: 1px;
      height: 1px;
      background-color: #fff;
      position: absolute;
      top: 100px;
      left: 50px;
    }

    @keyframes cloudMoving {
      0% {
        left: -50%;
        visibility: visible;
      }

      25% {
        left: -10%;
        visibility: visible;
      }

      50% {
        left: 40%;
        visibility: visible;
      }

      75% {
        left: 80%;
        visibility: visible;
      }

      100% {
        left: 100%;
        visibility: visible;
      }
    }

    .submarine-view .window-view {
      height: 250px;
      width: 250px;
    }

    .submarine-view .window-border {
      width: 100%;
      height: 100%;
    }

    .submarine-view .window-border-inside {
      width: 90%;
      height: 90%;
      border-radius: 50%;
    }

    .submarine-view .cloud-wrapper .cloud .cloud-part {
      background-color: #ff9800;
      width: 30px;
      height: 30px;
      border-radius: 0;
      border-top-right-radius: 15px;
      border-bottom-left-radius: 15px;
      transform: rotate(-45deg);
    }

    .submarine-view .cloud-wrapper .cloud:nth-child(2) .cloud-part {
      transform: rotate(-45deg);
      background-color: #4040f1;
    }

    .submarine-view .cloud-wrapper .cloud:nth-child(2) .cloud-part:before {
      border-bottom-color: #4040f1;
    }

    .submarine-view .cloud-wrapper .cloud .cloud-part:before {
      background-color: transparent;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 20px solid #ff9800;
      right: 18px;
      top: -8px;
      transform: rotate(136deg);
      width: 0px;
      height: 0px;
      border-radius: 0px;
      content: "";
      position: absolute;
    }

    .submarine-view .cloud-wrapper .cloud .cloud-part:after {
      background-color: #fff;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      left: 22px;
      top: 19px;
      content: "";
      position: absolute;
    }

    .submarine-view .cloud-wrapper .stars .star {
      position: absolute;
      width: 13px;
      height: 13px;
      background-color: #9ac4c761;
      border-radius: 50%;
      border-right: 2px solid #9ac4c7fa;
    }

    .submarine-view .moon {
      width: 100px;
      height: 80px;
      background: transparent;
      border-radius: 50%;
      position: absolute;
      top: 140px;
      left: 75px;
      border-top: 5px solid #07b507;
      transform: rotate(102deg);
      animation-name: grass;
      animation-duration: 20s;
    }

    @keyframes grass {
      0% {
        left: 0px;
      }

      100% {
        left: 200px;
      }
    }

    .submarine-view .moon:before,
    .moon:after {
      content: "";
      width: 50px;
      height: 50px;
      background: transparent;
      border-radius: 50%;
      position: absolute;
      top: 35px;
      left: 35px;
      border-top: 5px solid #07b507;
      transform: rotate(169deg);
    }

    .submarine-view .moon:after {
      transform: rotate(0deg);
      left: 55px;
      top: 85px;
    }

    .submarine-view .stars {
      animation-name: bubbles;
      animation-duration: 20s;
      animation-iteration-count: infinite;
    }

    @keyframes bubbles {
      0% {
        bottom: -150px;
      }

      100% {
        bottom: 250px;
      }
    }
  </style>

  <style>
    * {
      font-weight: 300;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
    }

    .main {
      color: #fff;
      text-align: center;
    }

    .main h1 {
      font-size: 42px;
      font-weight: 600;
      color: #FF2D55;
    }

    .main h2 {
      font-size: 24px;
      color: #EC3200;
      ;
    }

    .main h3 {
      font-size: 16px;
      color: #fff;
      padding-bottom: 5px;
    }

    h3::after {
      content: '';
      display: block;
      height: 1px;
      padding: 0;
      margin-top: 10px;
      border: none;
      border-top: medium solidid #333;
      text-align: center;
      background-image: linear-gradient(to right, rgba(248, 57, 41, 0), rgba(248, 57, 41, 0.75), rgba(248, 57, 41, 0));
    }

    .main ul {
      list-style: none;
      display: flex;
      justify-content: space-around;
      white-space: nowrap;
    }

    .main ul li {
      text-align: center;
    }

    .main ul li a {
      color: #fff;
      border: 1px solid #0070c9;
      background: #0070c9;
      min-width: 48px;
      border-radius: 9999em;
      padding: 5px 16px;
      text-align: center;
      font-size: 15px;
      line-height: 1.86667;
      font-weight: 300;
      line-height: 28px;
      text-decoration: none;
    }

    .main ul li a::after {
      content: '';
      padding-left: .3rem;
      display: inline-block;
      padding-bottom: 3px;
      width: 16px;
      height: 16px;
      line-height: 28px;
      vertical-align: middle;
      background: url(./images/arrow.svg) no-repeat;
      background-size: 16px 16px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="main-window" class="window-wrapper window">
      <div class="window-view">
        <div class="window-border window">
          <div class="window-border-inside window">
            <div class="sky window">
              <div class="moon">
              </div>
              <div class="cloud-wrapper">
                <div class="cloud">
                  <div class="cloud-part"></div>
                </div>
                <div class="cloud">
                  <div class="cloud-part"></div>
                </div>
                <div class="cloud">
                  <div class="cloud-part"></div>
                </div>
                <div class="stars">
                  <div class="star"></div>
                  <div class="star"></div>
                  <div class="star"></div>
                  <div class="star"></div>
                  <div class="star"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="radio-wrapper">
      <div class="form-check-inline">
        <label class="form-check-label" for="airplane">
          <input type="radio" class="form-check-input" id="airplane" name="control" value="Airplane" checked
            onclick="togglePlaneMode(true)"> Airplane
        </label>
      </div>
      <div class="form-check-inline">
        <label class="form-check-label" for="submarine">
          <input type="radio" class="form-check-input" id="submarine" name="control" value="Submarine"
            onclick="togglePlaneMode(false)"> Submarine
        </label>
      </div>
    </div>
  </div>
  <div class="main">
    <h1>503</h1>
    <h2>后台服务器正在维护中,请过段时间再来看看吧！</h2>
    <h3>👇 不妨趁这个时间提升一下自己 👇</h3>
    <ul>
      <li><a href="https://a-cai.gitee.io/blog/" target="_blank" rel="noopener noreferrer">前端面试题</a></li>
      <li><a href="https://noexceptions.gitee.io/" target="_blank" rel="noopener noreferrer">后端面试题</a></li>
      <li><a href="https://a-cai.gitee.io/" target="_blank" rel="noopener noreferrer">返回搜索页</a></li>
    </ul>
  </div>
  <img src="https://a-cai.gitee.io/jsapi/codes/%E7%AC%AC%E4%B8%89%E5%A4%A9/images/angel.gif" alt=""
    style="left: 561px; top: 208px;position: absolute;" id="mouseIcon">
  <script>
    let scene = document.getElementById("main-window");
    let style = document.documentElement.style;
    function togglePlaneMode(isPlane) {
      if (isPlane) {
        scene.classList.remove("submarine-view");
        style.setProperty("--radius", "100px 100px 100px 100px");
      } else {
        scene.classList.add("submarine-view");
        style.setProperty("--radius", "50%");
      }
    }
  </script>
  <footer style="text-align: center; font-size: 12px;color: #ccc;padding: 50px 0 20px 0;">
    <a href="http://www.miitbeian.gov.cn/" target="_blank"
      style="text-decoration: none;color: #fff;">黔ICP备19011703号-1</a>
  </footer>
  <script>
    var pic = document.querySelector('#mouseIcon');
    document.addEventListener('mousemove', function (e) {
      var x = e.pageX;
      var y = e.pageY;
      pic.style.left = x - 50 + 'px';
      pic.style.top = y - 40 + 'px';
      pic.style.cursor = pointer;
    });
    // 1. contextmenu 我们可以禁用右键菜单
    document.addEventListener('contextmenu', function (e) {
      e.preventDefault();
    })
    // 2. 禁止选中文字 selectstart
    document.addEventListener('selectstart', function (e) {
      e.preventDefault();

    })
  </script>
  <!--百度统计-->
  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?f0520f62ba5c925d45881169af02c7c8";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</body>

</html>